<template>
	<!-- <z-paging ref="paging" @query="ticketList"  v-model="venuelist"> -->
	<view class="">
		<template>
			<list :listinfo="listinfo" :current='current'></list>
			<view class="d-font-30 flex-space-between d-p-30">
				<view class="">
					购买数量
				</view>
				<view class="" v-if="current == '0'">
					<u-number-box :disabledInput="true" v-model="value" @change="valChange" :min="1" :max="5"
						color="#ffffff" bgColor="#35bcff" iconStyle="color: #fff"></u-number-box>
				</view>
				<view class="" v-else>
					<u-number-box :disabledInput="true" v-model="value" @change="valChange" :min="1" :max="1"
						color="#ffffff" bgColor="#35bcff" iconStyle="color: #fff"></u-number-box>
				</view>
			</view>
			<view class="d-font-38 d-p-30 d-bold">
				购买须知
			</view>
			<view class="d-font-30 d-p-l-30">
				有效期
			</view>
			<view class="d-font-32 d-p-l-30 d-p-t-15 d-bold">
				当日有效
			</view>
			<view class="d-font-30 d-p-l-30 d-p-t-15">
				使用时段
			</view>
			<view class="d-font-32 d-p-l-30 d-p-t-15 d-bold">
				{{listinfo.ticket_use_period}}
			</view>
			<view class="d-font-30 d-p-l-30 d-p-t-15">
				使用规则
			</view>
			<view class="d-font-32 d-p-l-30 d-p-t-15 d-bold">
				<view>1、本卡不记名、不挂失、恕不退换</view>
				<view>2、本卡需在有效期内使用，逾期无效</view>
				<!-- <view>大美健体对本微信商城线上销售及使用规则拥有最终解释权</view> -->
			</view>
			<view class="d-font-30 d-p-l-30 d-p-t-15">
				消费项目
			</view>
		<!-- 	<view class="d-font-32 d-p-l-30 d-p-t-15 d-bold">
				实小游泳|内馆游泳|一中游泳|双十游泳|六中游泳|外馆游泳|二小游泳|五缘游泳
			</view> -->
			<view class="dinggou">
				<view class="end">
					<view class="end-left">
						<!-- <view style="position: absolute;top: 0;left: 60rpx;z-index: 999;" @click="shoppingclick">
							<u-badge :type="type" max="99" :value="badvalue" bgColor='red'></u-badge>
						</view>
						<u-image src="/static/qita/icon2.png" width="50rpx" height="50rpx" style="margin-top: 20rpx;" @click="shoppingclick"></u-image> -->
						<view style="display: inline-block;">
							总额<text style="color: #f00;font-weight: bold;">￥{{money}}</text>
							<!-- <view class=""
								style="font-family: Source Han Sans CN-Regular, Source Han Sans CN;font-weight: 400;">
								<text style="color: #9E9E9E;font-size: 24rpx;">积分：20098</text><text
									style="color: #F98527;font-size: 16rpx;">（积分不足）</text>
							</view> -->
						</view>
					</view>
					<view class="end-right">
						<!-- <view class="end-right-l" @click="orderlist">
							加入购物车
						</view> -->
						<view class="end-right-r" @click="paylist">
							立即购买
						</view>
					</view>
				</view>
			</view>
		</template>
		<customer-Kefu></customer-Kefu>
		<!-- </z-paging> -->
	</view>
</template>

<script>
	import {
		cardDetail,
		ticket
	} from '@/common/api';
	import list from '../components/list.vue';
	import customerKefu from '../../components/customerKefu/customerKefu.vue'
	export default {
		components: {
			list,
			customerKefu
		},
		data() {
			return {
				venuelist: [],
				listinfo: {},
				value: 1,
				cardType: '',
				current: '',
				badvalue: 2,
				type: "warning",
				id: '',
				money: ''
			};
		},
		onLoad(e) {
			this.id = e.id
			this.cardType = e.cardType
			this.current = e.current
			this.ticketList()
		},
		methods: {
			// 金额计算保留两位小数
			amount(value) {
				return parseFloat(value).toFixed(2);
			},
			ticketList(page, limit) {
				cardDetail({
						venue_id: uni.getStorageSync('venue_id'),
						cardId: this.id,
						cardType: this.cardType
					})
					.then(res => {
						console.log(res, '9966')
						this.money = res.leastprice
						this.listinfo = res
					})
			},
			// 加入购物车
			orderlist() {

			},
			paylist() {
				uni.$u.route({
					url: '/pageA/pay/pay',
					params: {
						current: this.current,
						id: this.id,
						cardType: this.cardType,
						value: this.value
					}
				});
			},
			shoppingclick() {
				// uni.$u.route({
				// 	url: '/pageA/shopping_cart/shopping_cart',
				// 	params: {

				// 	}
				// });
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
				this.value = e.value
				this.money = this.amount(this.listinfo.leastprice * this.value)
				if (e.value == 5) {
					uni.$u.toast('单次购买不能大于五张，如有需要请至前台购买');
				}
			},


			cardDetail(id) {
				uni.$u.route({
					url: '/pages/home/cardDetail',
					params: {
						id
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.d-list-box {
		box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
		background: #35bcff;
		border-radius: 10rpx;
	}

	.d-list-box1 {
		box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
		background: rgb(48, 182, 134);
		border-radius: 10rpx;
	}

	.d-list-box2 {
		box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
		background: rgb(253, 168, 92);
		border-radius: 10rpx;
	}

	.d-tag {
		background: #f3f3f3;
		border-radius: 4rpx;
		height: 36rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		padding: 0 18rpx;
	}

	.d-be {
		color: #bebebe;
	}

	.d-red {
		color: #ffffff;
		margin-top: 10rpx !important;
	}

	.d-white {
		color: #ffffff;
		margin-top: 10rpx !important;
	}

	.d-xuxian {
		width: 100%;
		height: 1rpx;
		border-bottom: 1px dashed white;
		margin-top: 10rpx;
	}

	.d-bold {
		font-weight: bold;

	}

	.dinggou {
		width: 100vw;
		height: 15vw;
		position: fixed;
		bottom: 0;
		border-top: 1px solid #e8e8e8;
		line-height: 15vw;
		z-index: 1000;
		left: 0;
		background-color: white;
	}

	.end {
		width: 100vw;
		height: 15vw;
		position: fixed;
		bottom: 0;
		border-top: 1px solid #e8e8e8;
		line-height: 15vw;
		z-index: 1000;
		left: 0;
		background-color: white;
		display: flex;
		// align-items: center;
		justify-content: space-between;

		&-left {
			// width: 30%;
			display: flex;
			justify-content: flex-end;
			// padding: 0 30rpx;

			.end-flex {
				display: flex;
				align-items: center;
			}
		}

		&-right {
			display: flex;
			justify-content: flex-start;
			// width: 40%;
			height: 90rpx;
			justify-content: space-between;
			margin-top: 15rpx;

			&-l {
				height: 11vw;
				background-image: linear-gradient(90deg, #41f9a5 0%, #7bce22 100%), linear-gradient(#f08519, #f08519);
				background-blend-mode: normal, normal;
				border-radius: 5vw 0 0 5vw;
				line-height: 11vw;
				text-align: center;
				color: white;
				float: left;
				cursor: pointer;
				width: 20vw;
				font-size: 3.2vw;
			}

			&-r {
				width: 35vw;
				font-size: 3.2vw;
				height: 11vw;
				background-color: #35bcff;
				border-radius: 5vw;
				line-height: 11vw;
				text-align: center;
				color: white;
				float: left;
				cursor: pointer;


			}


		}
	}
</style>